<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">尝试以下</button>
    <script>
        window.onload = function(){
            var btn = document.getElementById("btn");

            /**
             * 使用 对象.事件 = 函数的形式绑定响应函数
             *  它只能同时为一个元素的一个事件绑定一个响应函数
             *  若有多个，则后面的函数将会把前面的函数覆盖
            */

                btn.onclick = function(){
                    console.log("1");
                }
                btn.onclick =function(){
                    console.log("2");
                }

            /**
             * addEvenListener()
             *  通过这个方法也可以为元素绑定响应函数
             *  参数：     
             *      1.事件的字符串，不要on
             *      2.回调函数，当事件触发时该函数会被使用
             *      3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
             * 
             *  使用addEvenListener（）可以同时为一个元素的相同事件同时绑定多个响应函数，
             *  这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
             * 
             * 
             * 
            */

            btn.addEventListener("click",function () {
                console.log(1);
            },false);
        }
    </script>
</body>
</html>